<template>
  <div class="DropSelect">
    <SkyCardPanel title="多选下拉框">
      <div slot="main" class="containter-form">
        <sky-form :model="form" ref="SkyInlineForm">
          <div class="SkyFormRow">
            <sky-form-item label="多选下拉框" class="col_8">
              <sky-drop-select :list="form.list1" width="100%"></sky-drop-select>
            </sky-form-item>
          </div>
        </sky-form>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
          //多选下拉框  

               &lt;sky-drop-select :list="form.list1" width="100%"&gt;&lt;/sky-drop-select&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
          //多选下拉框  

          export default {
            data () {
              return {
                form:{
                  list1: [
                  {
                    name: '袋鼠001',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                  {
                    name: '袋鼠002',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                  {
                    name: '袋鼠003',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                  {
                    name: '袋鼠004',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                  {
                    name: '袋鼠005',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                  {
                    name: '袋鼠006',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                ],
                }
              };
            },

          }; 

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="自定义列表下拉框">
      <div slot="main" class="containter-form">
        <sky-form :model="form" ref="SkyInlineForm">
          <div class="SkyFormRow">
            <sky-form-item label="多选下拉框" class="col_8">
              <sky-drop-select :list="form.list2" :render="renderFunc1" width="100%"></sky-drop-select>
            </sky-form-item>
          </div>
        </sky-form>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
          //自定义列表下拉框  

                   &lt;sky-drop-select :list="list2" :render="renderFunc1"&gt;&lt;/sky-drop-select&gt;   

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
          //自定义列表下拉框  

          export default {
            data () {
              return {
                form:{
                  list2: [
                  {
                    name: '袋鼠001',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                  {
                    name: '袋鼠002',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                  {
                    name: '袋鼠003',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                  {
                    name: '袋鼠004',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                  {
                    name: '袋鼠005',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                  {
                    name: '袋鼠006',
                    position: '交互设计师',
                    branch: '信息平台事业部',
                  },
                ],
                }
              };
            },
            methods: {
              renderFunc1 (h, unit) {
                let unitWrapStyle = {
                  display: 'flex',
                  alignItems: 'center',
                  height: '32px',
                }

                let imgsrc =require('../../skylibrary/assets/images/icon/icon_personImg.svg')
                let imgstyle = {
                  width: "20px",
                }
                return (
                  &lt;div style={unitWrapStyle} onClick={() =&gt; this.selectunit(unit)}&gt;
                    &lt;div class='personImg'&gt;
                      &lt;img style={imgstyle} src={imgsrc} alt="" /&gt;
                    &lt;/div&gt;
                    &lt;div class='content'&gt; {unit.name}-{unit.position}-{unit.branch}&lt;/div&gt;
                  &lt;/div&gt;
                )
              },
              selectunit (unit) {
                console.log(unit.name)
              }
            }
          };

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="树形下拉框">
      <div slot="header-right">
        <sky-button type="primary" @click="moreFun()">更多参数</sky-button>
      </div>
      <div slot="main" class="containter-form">
        <sky-form :model="form" ref="SkyInlineForm">
          <div class="SkyFormRow">
            <sky-form-item label="树形单选下拉框" class="col_8">
              <sky-tree-select :options="options1" :default-expand-level="1" :open-on-click="openOnClick" @node-click="handleNodeClick" placeholder="单选框" v-model="value1" :noResultsText="noText">
              </sky-tree-select>
            </sky-form-item>
          </div>
          <div class="SkyFormRow">
            <sky-form-item label="树形多选下拉框" class="col_8">
              <sky-tree-select :multiple="true" :flat="true" :options="options2" :default-expand-level="1" placeholder="多选框" v-model="value2" :noResultsText="noText">
              </sky-tree-select>
            </sky-form-item>
          </div>
        </sky-form>
      </div>
    </SkyCardPanel>
    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
          //自定义列表下拉框  

                 &lt;sky-tree-select
                :options="options1"
                :default-expand-level="1"
                placeholder="单选框"
                v-model="value1"
                :noResultsText="noText"
              &gt;
              &lt;/sky-tree-select&gt;  

              &lt;sky-tree-select
                :multiple="true" 
                :flat="true"
                :options="options2"
                :default-expand-level="1"
                placeholder="多选框"
                v-model="value2"
                :noResultsText="noText"
              &gt;
              &lt;/sky-tree-select&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
          //自定义列表下拉框  

          export default {
            data () {
              return {
                 value1: null,
                multiple:true,
                options1: [
                  {
                    id: "a",
                    label: "产品中心",
                    children: [
                      {
                        id: "aa",
                        label: "设计部",
                      },
                      {
                        id: "ab",
                        label: "产品部",
                      },
                    ],
                  },
                  {
                    id: "b",
                    label: "研发中心",
                  },
                  {
                    id: "c",
                    label: "项目中心",
                  },
                ],
                  value2: null,
                options2: [
                  {
                    id: "a",
                    label: "产品中心",
                    children: [
                      {
                        id: "aa",
                        label: "设计部",
                      },
                      {
                        id: "ab",
                        label: "产品部",
                      },
                    ],
                  },
                  {
                    id: "b",
                    label: "研发中心",
                  },
                  {
                    id: "c",
                    label: "项目中心",
                  },
                ],
                noText:"没有匹配的数据"
              };
            },
            methods: {
              
            }
          };

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        openOnClick: true,
        form: {

          list1: [
            {
              name: "袋鼠001",
              position: "交互设计师",
              branch: "信息平台事业部",
            },
            {
              name: "袋鼠002",
              position: "交互设计师",
              branch: "信息平台事业部",
            },
            {
              name: "袋鼠003",
              position: "交互设计师",
              branch: "信息平台事业部",
            },
            {
              name: "袋鼠004",
              position: "交互设计师",
              branch: "信息平台事业部",
            },
            {
              name: "袋鼠005",
              position: "交互设计师",
              branch: "信息平台事业部",
            },
            {
              name: "袋鼠006",
              position: "交互设计师",
              branch: "信息平台事业部",
            },
          ],
          list2: [
            {
              name: "张三",
              position: "交互设计师",
              branch: "信息平台事业部",
              imgSrc:
                "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1333960484,1981633983&fm=26&gp=0.jpg",
            },
            {
              name: "李四",
              position: "交互设计师",
              branch: "信息平台事业部",
              imgSrc: "../../skylibrary/assets/images/icon/icon_personImg.svg",
            },
            {
              name: "王五",
              position: "交互设计师",
              branch: "信息平台事业部",
              imgSrc: "../../skylibrary/assets/images/icon/icon_personImg.svg",
            },
            {
              name: "齐河",
              position: "交互设计师",
              branch: "信息平台事业部",
              imgSrc: "../../skylibrary/assets/images/icon/icon_personImg.svg",
            },
            {
              name: "吴琪",
              position: "交互设计师",
              branch: "信息平台事业部",
              imgSrc: "../../skylibrary/assets/images/icon/icon_personImg.svg",
            },
            {
              name: "张百里",
              position: "交互设计师",
              branch: "信息平台事业部",
              imgSrc: "../../skylibrary/assets/images/icon/icon_personImg.svg",
            },
          ],
        },
        value1: null,
        multiple: true,
        options1: [
          {
            id: "a",
            label: "产品中心",
            children: [
              {
                id: "aa",
                label: "设计部",
              },
              {
                id: "ab",
                label: "产品部",
              },
            ],
          },
          {
            id: "b",
            label: "研发中心",
          },
          {
            id: "c",
            label: "项目中心",
          },
        ],
        value2: null,
        options2: [
          {
            id: "a",
            label: "产品中心",
            children: [
              {
                id: "aa",
                label: "设计部",
              },
              {
                id: "ab",
                label: "产品部",
              },
            ],
          },
          {
            id: "b",
            label: "研发中心",
          },
          {
            id: "c",
            label: "项目中心",
          },
        ],
        noText: "没有匹配的数据",
      };
    },
    methods: {
      renderFunc1 (h, unit) {
        let unitWrapStyle = {
          alignItems: "center",
        };

        let imgsrc = require("../../skylibrary/assets/images/icon/icon_personImg.svg");
        let imgstyle = {
          width: "20px",
        };
        return (
          <div style={unitWrapStyle} onClick={() => this.selectunit(unit)}>
            <div class="personImg">
              <img style={imgstyle} src={imgsrc} alt="" />
            </div>
            <div class="content">
              {" "}
              {unit.name}-{unit.position}-{unit.branch}
            </div>
          </div>
        );
      },
      selectunit (unit) {
        console.log(unit.name);
      },
      moreFun () {
        window.open('https://www.vue-treeselect.cn/')
      },
      handleNodeClick (data) {
        console.log(data)
      }
    },
  };
</script>

<style lang="scss" scoped>
.DropSelect {
  padding-bottom: 100px;
}
</style>
